<template>
  <div ref="songConRef" class="song-container">
    <!-- 歌曲盘片 -->
    <div class="song-disc">
      <!-- 圆盘 -->
      <div class="disc" :style="`animation-play-state:${audioState ? 'paused' : 'running'}`">
        <img :src="picUrl" alt="" />
      </div>
      <!-- 唱针 -->
      <div class="needle" :style="`transform: rotate(${needleDeg})`"></div>
    </div>
    <!-- 歌曲信息 -->
    <div class="song-msg">
      <!-- 歌曲名称 -->
      <h2>{{ songDetail.name }}</h2>
      <!-- 歌词 -->
      <div ref="lyricRef" class="lyric">
        <p v-for="(item, index) in lyrReady" :key="index">{{ lyrReady[index] }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongByIdAPI, getLyricByIdAPI } from '@/api/Song.js'
import { mapGetters } from 'vuex'
import bus from '@/components/eventBus.js'

export default {
  name: 'Song',
  data() {
    return {
      id: this.$route.query.id,
      // 歌曲详情
      songDetail: {},
      // 歌词
      lyric: {},
      // 歌曲封面
      picUrl: '',
      // 处理后的歌词
      lyrReady: {},
      nowLyr: {}
    }
  },
  computed: {
    needleDeg() {
      return this.audioState ? '-32deg' : '0deg'
    },
    ...mapGetters(['audioState'])
  },
  methods: {
    // 获取歌曲
    async getSong() {
      // 歌曲详情
      const {
        data: { songs: res }
      } = await getSongByIdAPI(this.id)
      this.songDetail = res[0]
      // 歌曲封面
      this.picUrl = this.songDetail.al.picUrl
      // 歌词
      const {
        data: {
          lrc: { lyric: lyrStr }
        }
      } = await getLyricByIdAPI(this.id)
      this.lyric = lyrStr
      // 初始化拆分歌词
      this.lyrReady = this.formatLyric(this.lyric)
      // 目前歌词，默认 0 秒时
      this.nowLyr = this.lyrReady[0]
    },
    // 拆分歌词
    formatLyric(lyric) {
      // 时间戳
      let timeArr = lyric.match(/\[.+?\]/g)
      // 歌词内容
      let conArr = lyric.split(/\[.+?\]/).slice(1)
      // 处理后的歌词
      let lyricReady = {}
      timeArr.forEach((item, index) => {
        // 将分钟转换成秒
        let mtos = item.split(':')[0].split('')[2] * 60
        // 取出秒数
        let stos = item.split(':')[1].split('.')[0].split('')[0] === '0' ? item.split(':')[1].split('.')[0].split('')[1] : item.split(':')[1].split('.')[0]
        lyricReady[mtos + Number(stos)] = conArr[index]
      })
      return lyricReady
    },
    // 获取可视区域高度，用来设置歌词内容盒子的高度
    getHight() {
      // 屏幕可视区域高度
      let sh = document.documentElement.clientHeight || document.body.clientHeight
      // 歌词高度
      let lh = sh - 59 - 36.8 - 59 * 2
      this.$refs.lyricRef.style.height = lh + 'px'
      // 设置 song-msg 高度，解决定位后盒子高度塌陷
      this.$refs.songConRef.style.minHeight = sh - 59 + 'px'
    }
  },
  mounted() {
    this.getSong()
    this.getHight()
  },
  watch: {
    $route: {
      handler(newVal) {
        this.id = newVal.query.id
        this.getSong()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.song-container {
  position: relative;
  background-image: linear-gradient(#d0cad1, #fff 50%);
  .song-disc {
    position: absolute;
    top: 45px;
    left: 90px;
    .disc {
      position: absolute;
      top: 68px;
      width: 308.5px;
      height: 308.5px;
      background: url('@/views/Song/img/bg.png') no-repeat;
      background-size: 100% !important;
      animation: turn 40s linear infinite;
      img {
        position: absolute;
        top: 50%;
        margin-top: -97px;
        left: 50%;
        margin-left: -97px;
        width: 194px;
        height: 194px;
        border-radius: 97px;
      }
    }
    @keyframes turn {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .needle {
      position: absolute;
      left: 141.25px;
      width: 83.7px;
      height: 136.3px;
      background: url('@/views/Song/img/needle-ab.png') no-repeat;
      background-size: 100% !important;
      transform-origin: top left;
      transition: all 0.5s;
    }
  }
  .song-msg {
    position: absolute;
    top: 50px;
    right: 15%;
    width: 554px;
    h2 {
      font-size: 28px;
      font-weight: 400;
      color: #2c2b2c;
    }
    .lyric {
      font-size: 16px;
      overflow-y: auto;
      p {
        padding: 5px;
      }
      /*滚动条*/
      &::-webkit-scrollbar {
        width: 5px;
      }

      /*滑块部分*/
      &::-webkit-scrollbar-thumb {
        background-color: #ccc9cd;
        border-radius: 2.5px;
      }
    }
  }
}
</style>
